/**
 * 组件SSR导出工具
 * 使用Vue的服务端渲染能力将组件渲染为HTML
 */

import { createSSRApp, h } from 'vue';
import { renderToString } from '@vue/server-renderer';

/**
 * 创建适用于SSR的组件实例
 * @param {Object} component 组件定义
 * @param {Object} props 传递给组件的属性
 * @returns {Object} Vue应用实例
 */
function createSSRComponent(component, props) {
  return createSSRApp({
    render() {
      return h(component, props);
    }
  });
}

/**
 * 将Vue组件渲染为HTML字符串
 * @param {Object} vueComponent Vue组件对象
 * @param {Object} componentData 组件数据和配置
 * @returns {Promise<string>} 渲染后的HTML字符串
 */
export async function renderComponentToHTML(vueComponent, componentData) {
  const { id, style = {}, props = {} } = componentData;
  const datas = props.datas || {};
  
  // 构建props
  const componentProps = {
    datas: { ...datas },
    isExportMode: true,
    style: { ...style },
    id
  };
  
  // 创建应用实例
  const app = createSSRComponent(vueComponent, componentProps);
  
  try {
    // 使用SSR渲染为HTML
    const html = await renderToString(app);
    return html;
  } catch (error) {
    console.error('组件SSR渲染失败:', error);
    // 返回一个错误提示，防止整个导出失败
    return `<!-- 组件渲染错误: ${error.message} -->
<div id="${id}" class="ssr-render-error">组件渲染失败</div>`;
  }
}

/**
 * 为组件创建SSR导出处理器
 * @param {Object} vueComponent Vue组件对象
 * @param {Object} options 其他导出选项
 * @returns {Object} 导出处理器
 */
export function createSSRExporter(vueComponent, options = {}) {
  const { 
    customStyleProcessor,
    scriptGenerator,
    cssGenerator,
    resources = []
  } = options;
  
  return {
    /**
     * 生成组件HTML
     */
    async generateHTML(componentData, exportOptions = {}) {
      return await renderComponentToHTML(vueComponent, componentData);
    },
    
    /**
     * 生成组件JS
     */
    generateJS(componentData, exportOptions = {}) {
      if (scriptGenerator) {
        return scriptGenerator(componentData, exportOptions);
      }
      
      // 默认的事件处理生成
      const { id, props = {} } = componentData;
      const datas = props.datas || {};
      
      if (!datas.eventHandlers || Object.keys(datas.eventHandlers).length === 0) {
        return '';
      }
      
      // 生成事件处理代码
      let jsCode = `\n// ${id} 组件的事件处理\n`;
      
      Object.entries(datas.eventHandlers || {}).forEach(([event, handler]) => {
        if (handler) {
          jsCode += `document.getElementById("${id}").addEventListener("${event}", function(event) {
  ${handler}
});\n`;
        }
      });
      
      return jsCode;
    },
    
    /**
     * 生成组件CSS
     */
    generateCSS(componentData, exportOptions = {}) {
      if (cssGenerator) {
        return cssGenerator(componentData, exportOptions);
      }
      return '';
    },
    
    /**
     * 导出资源列表
     */
    resources
  };
}

export default {
  renderComponentToHTML,
  createSSRExporter
}; 